<template>
	<scroll-view class="backview" bounces="false">
		<lexiconNavVue title="问题反馈" />
		<scroll-view class="words-scroll" :style="{ height: scrollHeight + 'px'}" scroll-y>
			<view class="content-back">
				<view class="gameType-content-back">
					<view class="gameType-topTitle-view">
						<view class="gameType-topTitle">
							问题类型 | Question Type
						</view>
						<view class="gameType-line"></view>
					</view>
					<view class="title">可多选:</view>
					<view class="tag-box">
						<view v-for="(item, index) in tags" :class="`${item.checked ? 'check' : ''} tag-item`"
							:key='index' @click="handleTapItem" :data-index="index">
							{{item.title}}
						</view>
					</view>
					<view class="gameType-topTitle-view">
						<view class="gameType-topTitle">
							意见详情 | Details of comments
						</view>
						<view class="gameType-line"></view>
					</view>
					<textarea adjust-position class='message-textarea' placeholder="请输入您的宝贵意见(字数不超过200字)"
						maxlength="200" @input="handleChange" name="describe" />
					<button :class="`${canSub ? 'can-sub': ''} message-btn`" @click="formSubmit">提交</button>
				</view>
			</view>

		</scroll-view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				tags: [{
						"title": "单词问题",
						"property": "spell",
						"checked": false
					},
					{
						"title": "定义问题",
						"property": "def",
						"checked": false
					},
					{
						"title": "例句问题",
						"property": "exp",
						"checked": false
					}
				],
				describe: "",
				suggestion: "",
				canSub: false,
				transparency: 0,
				scrollHeight: uni.getSystemInfoSync().windowHeight,
			}
		},
		onLoad(options) {
			this.wordId = options.wordId;
		},
		onReady() {},
		methods: {
			handleTapItem: function(e) {
				var index = e.currentTarget.dataset.index;
				this.tags[index].checked = !this.tags[index].checked
			},
			handleChange: function(e) {
				console.log(e)
				this.describe = e.detail.value;
				this.canSub = this.describe.length > 0 ? true : false
			},
			formSubmit: function() {
				if (this.describe === "") {
					uni.showToast({
						title: '请输入您宝贵建议！',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				var backCloumList = [];
				for (var i = 0; i < this.tags.length; i++) {
					if (this.tags[i].checked) {
						backCloumList.push(this.tags[i].property)
					}
				}
				var formData = {};
				formData.describe = this.describe;
				formData.types = backCloumList;
				formData.wordId = this.wordId;
				this.$http.wordFeedback(formData).then(res => {
					console.log('wordFeedback', res)
					if (res.code === 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'success', //将值设置为 success 或者 ''
							duration: 2000,
							success: function() {
								setTimeout(function() {
									uni.navigateBack();
								}, 1000)
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000 //持续时间为 2秒
						})
					}
				})
				console.log('formData', formData)
			}
		}
	}
</script>
<style lang="less">
	.backview {
		width: 100%;
		height: 100vh;
		background: #fff7dd;
	}

	.words-scroll {
		width: 100%;
	}

	.content-back {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.check {
		background: #f7ac01 !important;
	}

	.can-sub {
		background: #f7ac01 !important;
		box-shadow: 0px 5px 0px 0px rgb(160, 160, 160);
	}

	.gameType-content-back {
		width: 90%;
		display: flex;
		position: relative;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border-radius: 20px;
		background-color: white;
		padding: 5px 0px 15px 0px;
		margin-top: 20px;
		box-shadow: 5px 5px 20px 5px rgb(160, 160, 160);

		.gameType-topTitle-view {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
		}

		.gameType-topTitle {
			font-family: 'hzgb';
			font-size: 17px;
			margin: 10px auto 5px 25px;
		}

		.gameType-line {
			width: 150px;
			height: 3px;
			background-color: #ffc824;
			margin-left: 25px;
		}

		.title {
			width: 85%;
			margin: 18px 25px 8px 25px;
			font-size: 15px;
			font-family: 'hzgb';
			color: #000000;
		}

		.tag-box {
			width: 90%;
			display: flex;
			margin-bottom: 20px;
			justify-content: space-around;
			flex-flow: row wrap;
		}

		.tag-item {
			background: #3f3735;
			border-radius: 20px;
			color: #ffffff;
			font-family: 'hzgb';
			width: 28%;
			height: 35px;
			font-size: 14px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.apply {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 15px;
		}

		.message-textarea {
			margin: 20px 10px;
			box-sizing: border-box;
			border-radius: 10px;
			background: #fff9cf;
			width: 84%;
			height: 200px;
			padding: 10px;
			font-size: 14px;
			box-shadow: 0px 5px 0px 0px rgb(160, 160, 160);
		}

		.message-btn {
			width: 280px;
			height: 40px;
			line-height: 40px;
			margin: 20px 5px;
			box-sizing: border-box;
			border-radius: 20px;
			background: #c9c9c9;
			font-family: 'hzgb';
		}
	}
</style>